<template>
  <div class="register page" ref="webview" :style="'height:'+height+'px'">
    <div ref="wrapper">
      <div class="hd">
        <span class="close" :class="{isApp:isApp}" @click="goBark" v-if="!$route.query.inviteNo"></span>
      </div>
      <div class="logo"></div>
      <div class="form">
        <div class="input">
          <van-field v-model="form.mobile" maxlength="11" clearable placeholder="请输入用户名" />
        </div>
        <div class="input">
          <van-field v-model="form.code" maxlength="6" clearable placeholder="请输入验证码">
            <span slot="button" class="code" :class="{disable: !disable}" @click="getCode">{{count?count + 's': codeText}}</span>
          </van-field>
        </div>
        <div class="input">
          <van-field v-model="form.password" clearable :type="isPasswordType?'text':'password'" placeholder="输入密码">
            <span class="showPassWord" slot="button" :class="{active: isPasswordType && form.password}" @click="showPassWord('1')"></span>
          </van-field>
        </div>
        <div class="input">
          <van-field v-model="confirmPpassword" clearable :type="isConfirmPasswordType?'text':'password'" placeholder="输入您的确认密码">
            <span class="showPassWord" slot="button" :class="{active: isConfirmPasswordType && confirmPpassword}" @click="showPassWord('2')"></span>
          </van-field>
        </div>
        <div class="input">
          <van-field v-model="form.recNo" clearable placeholder="推荐码" />
        </div>
        <div class="submit">
          <van-button round type="info" @click.native="submitRegister" color="#ffffff">
            <van-loading color="#ff0034" size="24" v-if="isLoading " />
            <span v-else>确认注册</span>
          </van-button>
        </div>
        <!-- <div class="operation">
          <van-checkbox v-model="IsAgreement" shape="square">我已阅读并接受</van-checkbox>
          <span @click="isPopup=true" class="flex">《注册协议》</span>
        </div> -->
      </div>
      <!-- <van-popup :duration="0.2" v-model="isPopup" position="bottom" style="height:100%">
        <div class="agreement-details">
          <div class="nav-bar" :class="{isApp:isApp}">
            <van-nav-bar title="注册协议" class="bg_white" @click-right="isPopup=false">
              <span class="van-icon van-icon-cross" slot="right" />
            </van-nav-bar>
          </div>
          <div class="content" v-html="agreement.content">
          </div>
        </div>
      </van-popup> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'JRegister',
  data () {
    return {
      isPopup: false,
      agreement: {},
      height: 0,
      IsAgreement: false,
      isConfirmPasswordType: false,
      isPasswordType: false,
      form: {
        mobile: '',
        password: '',
        code: '',
        recNo: '' // 20010001
      },
      isLoading: false,
      disable: true,
      confirmPpassword: '',
      colde: '',
      codeText: '发送验证码',
      count: '',
      timer: null
    };
  },
  created () {
    this.getAgreement();
    if (this.$route.query.inviteNo) {
      this.form.recNo = this.$route.query.inviteNo;
    }
  },
  computed: {
    isApp: {
      get () {
        return !!localStorage.getItem('isApp') || !!this.$route.query.isApp;
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.height = document.body.clientHeight;
    });
  },
  methods: {
    goBark () {
      this.$store.dispatch('setLoginType', 'login');
    },
    showPassWord (data) {
      if (data === '1') {
        if (!this.form.password) {
          return;
        }
        this.isPasswordType = !this.isPasswordType;
      } else {
        if (!this.confirmPpassword) {
          return;
        }
        this.isConfirmPasswordType = !this.isConfirmPasswordType;
      }
    },
    getSMS () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.disable = false;
        this.timer = setInterval(() => {
          this.count && (this.codeText = '重新获取');
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.disable = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    getCode () {
      var isPhone = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile));
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (!this.disable) {
        return;
      }
      // this.getSMS();
      this.$API.user.sendMsg({
        mobile: this.form.mobile + '',
        type: 1
      }).then(res => {
        if (res.code === -1) {
          this.$toast(res.message);
        } else {
          this.getSMS();
          this.$toast('验证码发送成功,请注意查收');
        }
      });
    },
    submitRegister () {
      if (this.isLoading) {
        return;
      }
      var isPassWord = /[\u4e00-\u9fa5]/;
      var disabled = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile));
      if (disabled) {
        // this.$toast.loading();
        this.$toast('请输入正确的手机号!');
        return;
      }
      var _account = this.form.mobile + '';
      var _password = this.form.password + '';
      if (!_account) {
        this.$toast('手机号不能为空');
        return;
      }
      if (!this.form.code) {
        this.$toast('验证码不能为空');
        return;
      }
      if (_password.length < 6) {
        this.$toast('密码长度不能少于6位');
        return;
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      if (!this.confirmPpassword) {
        this.$toast('确认密码不能为空');
        return;
      }
      if (isPassWord.test(_password) || isPassWord.test(this.confirmPpassword)) {
        this.$toast('密码只能输入数字、字母和特殊符号组合');
        return;
      }
      if (this.form.password !== this.confirmPpassword) {
        this.$toast('两次密码输入的不一致!');
        return;
      }
      // if (!this.IsAgreement) {
      //   this.$toast('注册协议没有选中');
      //   return;
      // }
      // debugger;
      var options = this.form;
      this.isLoading = true;
      this.$API.user.register(options).then((res) => {
        if (res.code === 0) {
          this.$store.dispatch('setLogin', false);
          localStorage.setItem('Token', res.data);
          this.$toast('注册成功');
          setTimeout(() => {
            // 如果是有邀请码的注册
            if (this.$route.query.inviteNo) {
              this.$router.push({ 'path': '/home' });
            } else {
              this.$router.go(-1);
            }
          }, 500);
        }
        this.isLoading = false;
      });
    },
    getAgreement () {
      this.$toast.loading();
      var options = {
        code: 'reg'
      };
      this.$API.global.getCnt(options).then(res => {
        if (res.data) {
          this.agreement = res.data;
        }
        this.$toast.clear();
      });
    }
  }
};
</script>
<style scoped lang="less">
.register {
  height: 100%;
  background: linear-gradient(259deg, rgba(239, 0, 62, 1) 0%, rgba(253, 32, 77, 1) 100%, rgba(255, 39, 83, 1) 100%);
  padding-top: env(safe-area-inset-top);
  .logo {
    width: 201px;
    height: 201px;
    background-image: url('/static/img/login-logo.png');
    background-repeat: no-repeat;
    background-size: 171px 177px;
    background-position: center center;
    border-radius: 201px;
    margin: 0 auto;
  }
  .agreement-details {
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-icon-cross {
      font-size: 40px;
      padding-right: 10px;
    }
    .content {
      padding: 34px;
      flex: 1;
      overflow: auto;
      font-size: 28px;
      color: #171717;
      line-height: 60px;
    }
  }

  .bark {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 41px;
    height: 38px;
    display: block;
    background-image: url('/static/images/icon-reg-brak.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 41px 38px;
  }
  .bark.isApp {
    top: 65px;
  }
  .form {
    margin: 0 60px;
    .input {
      position: relative;
      .showPassWord {
        display: block;
        width: 40px;
        height: 21px;
        margin-left: 10px;
        background-image: url('/static/images/icon-login-hide.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }
      .showPassWord.active {
        background-image: url('/static/images/icon-login-show.png');
      }
      .code {
        background-color: #fff;
        border-radius: 50px;
        font-size: 24px;
        padding: 6px 20px 4px;
        display: inline-block;
        color: #ff0034;
      }
      .code.disable {
        background-color: #dbdee6;
      }
    }
    .operation {
      padding-top: 45px;
      color: #fff;
      display: flex;
      font-size: 28px;
      .van-checkbox {
        vertical-align: middle;
      }
      span.flex {
        flex: 1;
        margin-top: -5px;
      }
    }
  }
  .submit {
    margin-top: 67px;
    .van-button {
      width: 100%;
      height: 98px;
      .van-button__text {
        font-size: 34px;
        color: #ff0034;
      }
    }
  }
}
</style>
